<template>
	<s-layout title="转账记录" :bgStyle="{color:'#F6F6F6'}" onShareAppMessage>

		<view class="fitler-items ss-flex-row ss-m-t-48">
			<template v-for="(item,index) in filterArr" :key="index">
				<view class="item" :class="{select:state.dateIndex==index,unselect:state.dateIndex!=index}"
					@click="itemClick(index)" v-if="index!=3">{{item.label}}</view>

				<uni-datetime-picker v-model="state.date" type="daterange" @change="pickerChange"  v-if="index==3">
					<view class="item" :class="{select:state.dateIndex==index,unselect:state.dateIndex!=index}"
						@click="itemClick(index)">{{item.label}}</view>
				</uni-datetime-picker>
			</template>

		</view>
		<template v-if="state.pagination.total > 0">
			<transfer-cell :data="state.pagination.data" :total="state.total"></transfer-cell>
		</template>	
		

		<s-empty v-if="state.pagination.total === 0" text="暂无记录" icon="/static/data-empty.png" />

		<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
		    contentdown: '上拉加载更多',
		  }" @tap="loadmore" />

	</s-layout>
</template>

<script setup>
	import sheep from '@/sheep';

	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app';
	import uniDatetimePicker from "./components/uni-datetime-picker/uni-datetime-picker.vue"
	import {
		ref,
		computed,
		reactive
	} from 'vue';

	import _ from 'lodash';
	import dayjs from 'dayjs';
	import isoWeek from 'dayjs/plugin/isoWeek'

	dayjs.extend(isoWeek)

	import transferCell from './components/transfer-cell.vue';

	const filterArr = ref([{
		label: '本周',
		value: 0
	}, {
		label: '本月',
		value: 1
	}, {
		label: '本年',
		value: 2
	}, {
		label: '自定义区间',
		value: 3
	}])

	const state = reactive({
		amount: '',
		dateIndex: 0,
		date: [],
		date_s: '',
		date_e: '',
		pagination: {
			data: [],
			current_page: 1,
			total: 1,
			last_page: 1,
		},
		loadStatus: '',
		total:0,
	})

	onLoad((options) => {
		state.date_s = dayjs().startOf('isoWeek').format('YYYY-MM-DD');
		state.date_e = dayjs().endOf('isoWeek').format('YYYY-MM-DD');
		getList();
	});
	
	function pickerChange(e){
		state.date = e;
		state.date_s = state.date[0];
		state.date_e = state.date[1];
		state.pagination = {
			data: [],
			current_page: 1,
			total: 1,
			last_page: 1,
		};
		getList();
	}

	function itemClick(index) {
		state.dateIndex = index;

		switch (state.dateIndex) {
			case 0:
				state.date_s = dayjs().startOf('isoWeek').format('YYYY-MM-DD');
				state.date_e = dayjs().endOf('isoWeek').format('YYYY-MM-DD');
				break
			case 1:
				state.date_s = dayjs().startOf('month').format('YYYY-MM-DD');
				state.date_e = dayjs().endOf('month').format('YYYY-MM-DD');
				break
			case 2:
				state.date_s = dayjs().startOf('year').format('YYYY-MM-DD');
				state.date_e = dayjs().endOf('year').format('YYYY-MM-DD');
				break
			case 3:
				state.date_s = state.date[0];
				state.date_e = state.date[1];
				break
		}

		state.pagination = {
			data: [],
			current_page: 1,
			total: 1,
			last_page: 1,
		};
		getList();
	}

	// 加载更多
	function loadmore() {
		if (state.loadStatus !== 'noMore') {
			getList(state.pagination.current_page + 1);
		}
	}

	// 上拉加载更多
	onReachBottom(() => {
		loadmore();
	});

	// 获取订单列表
	async function getList(page = 1, list_rows = 15) {
		state.loadStatus = 'loading';
		let res = await sheep.$api.transfer.getTransferLog({
			page: page,
			list_rows: list_rows,
			date_s: state.date_s,
			date_e: state.date_e,
		});
		if (res.error === 0) {
			state.total = res.data.sum
			if (page >= 2) {
				let list = _.concat(state.pagination.data, res.data.logs.data);
				state.pagination = {
					...res.data.logs,
					data: list,
				};
			} else {
				state.pagination = res.data.logs;
			}

			if (state.pagination.current_page < state.pagination.last_page) {
				state.loadStatus = 'more';
			} else {
				state.loadStatus = 'noMore';
			}
			console.log('state.pagination:',state.pagination.data)
		}
	}
</script>

<style lang="scss" scoped>
	.fitler-items {
		margin-left: 45rpx;

		.item {
			max-width: 180rpx !important;
			max-height: 41rpx;
			font-family: Source Han Sans;

			font-weight: normal;
			line-height: normal;
			letter-spacing: normal;


			display: flex;
			justify-content: center;
			align-items: center;
		}

		.item:nth-child(1) {
			margin-right: 29rpx;
		}

		.item:nth-child(2) {
			margin-right: 33rpx;
		}

		.item:nth-child(3) {
			margin-right: 35rpx;
		}

	}

	.select {
		color: #1855FF;
		font-size: 35rpx;
	}

	.unselect {
		color: #B0B0B0;
		font-size: 28rpx;
	}
</style>